<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>科研项目管理系统 - 项目列表</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding-top: 20px;
        }
        .card {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h1 class="h3">科研项目管理系统</h1>
        </div>
        <div class="card-body">
            <nav class="nav mb-4">
                <a class="nav-link active" href="/project/list">项目管理</a>
                <a class="nav-link" href="/project/stats">统计分析</a>
                <a class="nav-link" href="/college/list">学院管理</a>
            </nav>

            <div class="card mb-4">
                <div class="card-header">项目查询</div>
                <div class="card-body">
                    <form action="/project/list" method="get" class="row g-3">
                        <div class="col-md-4">
                            <label for="title" class="form-label">项目标题</label>
                            <input type="text" id="title" name="title" th:value="${title}" class="form-control" placeholder="请输入项目标题">
                        </div>
                        <div class="col-md-3">
                            <label for="collegeId" class="form-label">所属学院</label>
                            <select id="collegeId" name="collegeId" class="form-select">
                                <option value="0">全部学院</option>
                                <option th:each="college : ${colleges}" th:value="${college.id}" th:text="${college.name}" th:selected="${collegeId == college.id}"></option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="status" class="form-label">项目状态</label>
                            <select id="status" name="status" class="form-select">
                                <option value="0">全部状态</option>
                                <option value="1" th:selected="${status == 1}">筹备</option>
                                <option value="2" th:selected="${status == 2}">进行中</option>
                                <option value="3" th:selected="${status == 3}">已结题</option>
                            </select>
                        </div>
                        <div class="col-md-2" style="padding-top: 30px;">
                            <button type="submit" class="btn btn-primary w-100">查询</button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="mb-3">
                <a href="/project/add" class="btn btn-success">新增项目</a>
            </div>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>项目标题</th>
                        <th>所属学院</th>
                        <th>项目负责人</th>
                        <th>起止时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="project, stat : ${projects}">
                        <td th:text="${stat.count}"></td>
                        <td th:text="${project.title}"></td>
                        <td th:text="${project.collegeName}"></td>
                        <td th:text="${project.leader}"></td>
                        <td>
                            <span th:text="${#dates.format(project.startDate, 'yyyy-MM-dd')}"></span> - 
                            <span th:text="${#dates.format(project.endDate, 'yyyy-MM-dd')}"></span>
                        </td>
                        <td>
                            <span th:if="${project.status == 1}" class="badge bg-secondary">筹备</span>
                            <span th:if="${project.status == 2}" class="badge bg-primary">进行中</span>
                            <span th:if="${project.status == 3}" class="badge bg-success">已结题</span>
                        </td>
                        <td>
                            <a th:href="@{/project/edit/{id}(id=${project.id})}" class="btn btn-sm btn-warning">编辑</a>
                            <a th:href="@{/project/delete/{id}(id=${project.id})}" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除该项目吗？')">删除</a>
                            <a th:if="${project.attachmentPath != null}" th:href="@{/project/download/{id}(id=${project.id})}" class="btn btn-sm btn-info">下载附件</a>
                        </td>
                    </tr>
                </tbody>
            </table>

            <div th:if="${projects.empty}" class="text-center text-muted">
                暂无数据
            </div>
            
            <!-- 分页控件 -->
            <div th:if="${not projects.empty}" class="mt-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        <!-- 上一页 -->
                        <li class="page-item" th:classappend="${current == 1} ? 'disabled'">
                            <a class="page-link" href="#" th:href="@{/project/list(title=${title}, collegeId=${collegeId}, status=${status}, pageNum=${current - 1}, pageSize=${size})}">
                                上一页
                            </a>
                        </li>
                        
                        <!-- 页码 -->
                        <li class="page-item" th:each="page : ${#numbers.sequence(1, pages)}" 
                            th:classappend="${page == current} ? 'active'">
                            <a class="page-link" href="#" 
                               th:href="@{/project/list(title=${title}, collegeId=${collegeId}, status=${status}, pageNum=${page}, pageSize=${size})}" 
                               th:text="${page}">
                            </a>
                        </li>
                        
                        <!-- 下一页 -->
                        <li class="page-item" th:classappend="${current == pages} ? 'disabled'">
                            <a class="page-link" href="#" th:href="@{/project/list(title=${title}, collegeId=${collegeId}, status=${status}, pageNum=${current + 1}, pageSize=${size})}">
                                下一页
                            </a>
                        </li>
                    </ul>
                </nav>
                
                <div class="text-center text-muted mt-2">
                    共 <span th:text="${total}"></span> 条记录，第 <span th:text="${current}"></span>/<span th:text="${pages}"></span> 页
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>